<page-header [title]="'分类管理'">
  创建一级、二级甚至三级分类，树控件展示分类层次
</page-header>

<nz-tree
  #treeCom
  [nzData]="nodes"
  nzAsyncData="true"
  (nzClick)="nzClick($event)"
  (nzExpandChange)="nzEvent($event)"
>
  <ng-template #contextTemplate>
    <ul nz-menu nzInDropDown>
      <li nz-menu-item (click)="create(modalContent)">新建</li>
      <li nz-menu-item (click)="del()">删除</li>
    </ul>
  </ng-template>

  <ng-template #nzTreeTemplate let-node>
    <span class="custom-node" [class.active]="activedNode?.key === node.key">
      <span
        *ngIf="true"
        (contextmenu)="contextMenu($event, contextTemplate, node)"
      >
        <i nz-icon type="file"></i>
        <span class="folder-name"> {{ node.title }}</span>
      </span>
      
    </span>
  </ng-template>
</nz-tree>

<ng-template #modalContent>
  <nz-card [nzBordered]="false">
    <form nz-form se-container="1" labelWidth="50">
      <se label="名称" error="不能为空" required>
        <input
          nz-input
          [(ngModel)]="catalogName"
          [ngModelOptions]="{ standalone: true }"
        />
      </se>
    </form>
  </nz-card>
</ng-template>
